<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Chrome 风格标签页</title>
    <style>
        /* --- 基础和布局 --- */
        :root {
            --primary-color: #1a73e8;
            --border-color: #dadce0;
            --text-color: #3c4043;
            --text-color-light: #5f6368;
            --hover-bg-color: #f1f3f4;
            --body-bg-color: #f8f9fa;
            --container-bg-color: #ffffff;
            --shadow-color: rgba(0, 0, 0, 0.1);
            --transition-speed-fast: 0.25s;
            --transition-speed-slow: 0.4s;
            --animation-curve: cubic-bezier(0.4, 0, 0.2, 1);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--body-bg-color);
            margin: 0;
            padding: 40px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
        }

        .tabs-container {
            width: 100%;
            max-width: 800px;
            background-color: var(--container-bg-color);
            border-radius: 8px;
            box-shadow: 0 4px 12px var(--shadow-color);
            position: relative; /* 为预览窗口和指示器提供定位上下文 */
        }

        /* --- 标签页头部 --- */
        .tabs-header {
            position: relative;
            padding: 0 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .tabs-list {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
        }

        .tab {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 14px 16px;
            cursor: pointer;
            color: var(--text-color-light);
            position: relative;
            border-radius: 6px 6px 0 0;
            transition: background-color var(--transition-speed-fast) ease;
            flex-shrink: 0; /* 防止标签在 flex 布局中被压缩 */
        }

        .tab:not(.active):hover {
            background-color: var(--hover-bg-color);
        }

        .tab.active {
            color: var(--primary-color);
            font-weight: 500;
        }

        .tab-title {
            margin-right: 8px; /* 为关闭按钮留出初始空间 */
            transition: margin-right var(--transition-speed-fast) ease;
        }
        
        /* 当悬浮时，标题向左移动，为关闭按钮腾出更多空间 */
        .tab:hover .tab-title {
            margin-right: 16px;
        }

        /* --- 关闭按钮 --- */
        .close-tab {
            border: none;
            background-color: transparent;
            font-size: 20px;
            font-weight: 300;
            line-height: 1;
            color: var(--text-color-light);
            cursor: pointer;
            padding: 2px;
            border-radius: 50%;
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%) scale(0.5); /* 初始状态缩小并透明 */
            opacity: 0;
            visibility: hidden;
            transition: transform var(--transition-speed-fast) var(--animation-curve),
                        opacity var(--transition-speed-fast) var(--animation-curve),
                        background-color var(--transition-speed-fast) ease;
        }

        .tab:hover .close-tab {
            transform: translateY(-50%) scale(1); /* 悬浮时恢复正常大小 */
            opacity: 1;
            visibility: visible;
        }

        .close-tab:hover {
            background-color: #e8eaed;
            color: var(--text-color);
        }

        /* --- 激活指示器 (滑动动画的关键) --- */
        .active-tab-indicator {
            position: absolute;
            bottom: -1px; /* 覆盖在 border-bottom 上方 */
            height: 2px;
            background-color: var(--primary-color);
            border-radius: 1px;
            /* 核心过渡动画 */
            transition: left var(--transition-speed-slow) var(--animation-curve), 
                        width var(--transition-speed-slow) var(--animation-curve);
        }

        /* --- 内容区域 --- */
        .tab-content-container {
            padding: 25px;
            position: relative;
            min-height: 320px;
            overflow: hidden; /* 隐藏非激活内容 */
        }

        .tab-content {
            /* 使用绝对定位让所有内容块重叠，便于控制淡入淡出 */
            position: absolute;
            top: 25px;
            left: 25px;
            right: 25px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: opacity var(--transition-speed-slow) ease, 
                        transform var(--transition-speed-slow) ease, 
                        visibility var(--transition-speed-slow);
        }

        .tab-content.active {
            position: relative; /* 激活的恢复正常文档流 */
            top: 0;
            left: 0;
            right: 0;
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .tab-content h2 {
            margin-top: 0;
            color: var(--text-color);
        }

        .tab-content img {
            max-width: 100%;
            margin-top: 15px;
            border-radius: 4px;
            height: auto;
        }

        /* --- 预览窗口 --- */
        .tab-previews-container {
            position: absolute;
            top: 55px; /* 位于标签栏下方 */
            left: 0;
            width: 100%;
            z-index: 10;
            pointer-events: none; /* 容器本身不响应鼠标事件，让事件穿透 */
        }

        .tab-preview {
            position: absolute;
            background-color: var(--container-bg-color);
            border: 1px solid var(--border-color);
            box-shadow: 0 6px 15px var(--shadow-color);
            border-radius: 6px;
            padding: 10px;
            width: 300px; /* 固定预览宽度 */
            opacity: 0;
            visibility: hidden;
            transform: translateY(15px); /* 从更下方出现，效果更明显 */
            transition: opacity var(--transition-speed-fast) ease, 
                        transform var(--transition-speed-fast) ease, 
                        visibility var(--transition-speed-fast);
        }

        .tab-preview.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .tab-preview img {
            width: 100%;
            display: block;
            border-radius: 4px;
        }
        .tab-preview span {
            display: block;
            text-align: center;
            margin-top: 8px;
            font-size: 14px;
            color: var(--text-color);
        }

    </style>
</head>
<body>

<div class="tabs-container">
    <!-- 1. 标签页头部 -->
    <div class="tabs-header">
        <ul class="tabs-list">
            <li class="tab active" data-tab="tab1">
                <span class="tab-title">首页</span>
                <button class="close-tab" aria-label="关闭标签页">&times;</button>
            </li>
            <li class="tab" data-tab="tab2">
                <span class="tab-title">文档</span>
                <button class="close-tab" aria-label="关闭标签页">&times;</button>
            </li>
            <li class="tab" data-tab="tab3">
                <span class="tab-title">设置</span>
                <button class="close-tab" aria-label="关闭标签页">&times;</button>
            </li>
            <li class="tab" data-tab="tab4">
                <span class="tab-title">关于我们</span>
                <button class="close-tab" aria-label="关闭标签页">&times;</button>
            </li>
        </ul>
        <!-- 激活指示器 -->
        <div class="active-tab-indicator"></div>
    </div>

    <!-- 2. 内容区域 -->
    <div class="tab-content-container">
        <div class="tab-content active" data-tab="tab1">
            <h2>首页内容</h2>
            <p>这里是首页的具体内容。欢迎来到我们的网站！</p>
            <img src="https://placehold.co/600x300/1a73e8/ffffff?text=首页内容" alt="首页图片">
        </div>
        <div class="tab-content" data-tab="tab2">
            <h2>文档内容</h2>
            <p>在这里查找所有相关的技术文档和用户手册。</p>
            <img src="https://placehold.co/600x300/34a853/ffffff?text=文档内容" alt="文档图片">
        </div>
        <div class="tab-content" data-tab="tab3">
            <h2>设置内容</h2>
            <p>自定义您的偏好设置，管理您的账户信息。</p>
            <img src="https://placehold.co/600x300/fbbc05/000000?text=设置内容" alt="设置图片">
        </div>
        <div class="tab-content" data-tab="tab4">
            <h2>关于我们</h2>
            <p>了解我们的团队和使命。</p>
            <img src="https://placehold.co/600x300/ea4335/ffffff?text=关于我们" alt="关于我们图片">
        </div>
    </div>

    <!-- 3. 预览窗口容器 -->
    <div class="tab-previews-container">
         <div class="tab-preview" data-tab="tab1">
            <img src="https://placehold.co/300x150/1a73e8/ffffff?text=首页预览" alt="首页预览">
            <span>首页预览</span>
        </div>
        <div class="tab-preview" data-tab="tab2">
            <img src="https://placehold.co/300x150/34a853/ffffff?text=文档预览" alt="文档预览">
            <span>文档预览</span>
        </div>
        <div class="tab-preview" data-tab="tab3">
            <img src="https://placehold.co/300x150/fbbc05/000000?text=设置预览" alt="设置预览">
            <span>设置预览</span>
        </div>
        <div class="tab-preview" data-tab="tab4">
            <img src="https://placehold.co/300x150/ea4335/ffffff?text=关于我们预览" alt="关于我们预览">
            <span>关于我们预览</span>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const tabsContainer = document.querySelector('.tabs-container');
    const tabsList = document.querySelector('.tabs-list');
    const indicator = document.querySelector('.active-tab-indicator');
    
    // 使用事件委托来处理所有标签页相关的事件，性能更优
    tabsContainer.addEventListener('click', handleTabActions);
    tabsContainer.addEventListener('mouseover', handleTabHover);
    tabsContainer.addEventListener('mouseout', handleTabMouseOut);

    /**
     * 更新指示器的位置和宽度以匹配激活的标签
     * @param {HTMLElement} activeTab - 当前激活的标签元素
     */
    function updateIndicator(activeTab) {
        if (activeTab) {
            // getBoundingClientRect 提供了更精确的位置信息
            const tabRect = activeTab.getBoundingClientRect();
            const listRect = tabsList.getBoundingClientRect();
            
            indicator.style.width = `${tabRect.width}px`;
            indicator.style.left = `${tabRect.left - listRect.left}px`;
            indicator.style.opacity = '1';
        } else {
            // 如果没有激活的标签，则隐藏指示器
            indicator.style.opacity = '0';
        }
    }

    /**
     * 切换到指定的标签页
     * @param {string} tabId - 目标标签的 data-tab ID
     */
    function switchTab(tabId) {
        const targetTab = tabsContainer.querySelector(`.tab[data-tab="${tabId}"]`);
        const targetContent = tabsContainer.querySelector(`.tab-content[data-tab="${tabId}"]`);

        if (!targetTab || targetTab.classList.contains('active')) {
            return; // 如果目标不存在或是当前已激活的，则不执行任何操作
        }

        // 移除所有元素的 active class
        tabsContainer.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        tabsContainer.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

        // 为目标添加 active class
        targetTab.classList.add('active');
        targetContent.classList.add('active');
        
        // 更新指示器位置
        updateIndicator(targetTab);
    }

    /**
     * 处理点击事件（切换或关闭）
     * @param {Event} e - 点击事件对象
     */
    function handleTabActions(e) {
        const closeButton = e.target.closest('.close-tab');
        if (closeButton) {
            e.stopPropagation(); // 阻止事件冒泡到父级 tab
            const tabToClose = closeButton.parentElement;
            closeTab(tabToClose);
            return;
        }

        const tab = e.target.closest('.tab');
        if (tab) {
            const tabId = tab.dataset.tab;
            switchTab(tabId);
        }
    }

    /**
     * 关闭指定的标签页
     * @param {HTMLElement} tabToClose - 要关闭的标签元素
     */
    function closeTab(tabToClose) {
        const tabIdToClose = tabToClose.dataset.tab;
        const contentToClose = tabsContainer.querySelector(`.tab-content[data-tab="${tabIdToClose}"]`);
        const previewToClose = tabsContainer.querySelector(`.tab-preview[data-tab="${tabIdToClose}"]`);
        
        const wasActive = tabToClose.classList.contains('active');
        const prevSibling = tabToClose.previousElementSibling;
        const nextSibling = tabToClose.nextElementSibling;

        // 从DOM中平滑地移除元素（可选动画）
        tabToClose.remove();
        if (contentToClose) contentToClose.remove();
        if (previewToClose) previewToClose.remove();

        // 如果关闭的是激活的标签，则激活旁边的标签
        if (wasActive) {
            if (prevSibling && prevSibling.classList.contains('tab')) {
                switchTab(prevSibling.dataset.tab);
            } else if (nextSibling && nextSibling.classList.contains('tab')) {
                switchTab(nextSibling.dataset.tab);
            } else {
                // 如果是最后一个标签页
                updateIndicator(null);
            }
        } else {
             // 如果关闭的不是激活标签，只需重新计算并更新指示器位置即可
             const currentActiveTab = tabsContainer.querySelector('.tab.active');
             updateIndicator(currentActiveTab);
        }
    }
    
    /**
     * 处理鼠标悬浮事件，显示预览
     * @param {Event} e - 鼠标事件对象
     */
    function handleTabHover(e) {
        const tab = e.target.closest('.tab');
        if (tab && !tab.classList.contains('active')) {
            const tabId = tab.dataset.tab;
            const preview = tabsContainer.querySelector(`.tab-preview[data-tab="${tabId}"]`);
            if (preview) {
                // 定位预览窗口
                const tabRect = tab.getBoundingClientRect();
                const containerRect = tabsContainer.getBoundingClientRect();
                // 将预览窗口的左边缘与标签的左边缘对齐
                let previewLeft = tabRect.left - containerRect.left;
                
                // 防止预览窗口超出容器右边界
                if (previewLeft + preview.offsetWidth > containerRect.width) {
                    previewLeft = containerRect.width - preview.offsetWidth - 10; // 10px 边距
                }
                
                preview.style.left = `${previewLeft}px`;
                preview.classList.add('visible');
            }
        }
    }
    
    /**
     * 处理鼠标移出事件，隐藏预览
     * @param {Event} e - 鼠标事件对象
     */
    function handleTabMouseOut(e) {
        const tab = e.target.closest('.tab');
        if (tab) {
             const tabId = tab.dataset.tab;
             const preview = tabsContainer.querySelector(`.tab-preview[data-tab="${tabId}"]`);
             if (preview) {
                 preview.classList.remove('visible');
             }
        }
    }

    /**
     * 初始化函数
     */
    function initialize() {
        const initialActiveTab = tabsContainer.querySelector('.tab.active');
        if (initialActiveTab) {
            updateIndicator(initialActiveTab);
        }
        // 当窗口大小改变时，重新计算指示器位置，确保其准确性
        window.addEventListener('resize', () => {
            const activeTab = tabsContainer.querySelector('.tab.active');
            updateIndicator(activeTab);
        });
    }

    // 启动！
    initialize();
});
</script>

</body>
</html>

